<template>
  <ElCard>
    <el-row :gutter="10" style="width: 100%;height: 80vh;background-color: #FFF;">
      <el-col :span="5" style="border-right: 1px solid #F0F2F5;">
        <div class="dictionary-list">
          <span style="font-size: 20px;font-weight: bold;">字典列表</span>
        </div>
        <div style="width: 300px">
          <el-form :model="searchForm">
            <el-form-item>
              <el-input prefix-icon="Search" @keydown.enter="handleEnter" placeholder="请输入..." clearable style="width: 100%;padding: 10px;" v-model="searchForm.dictName"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <div>
            <el-table :data="currentPageData" size="large" highlight-current-row @row-click="handleRowClick" v-model:current-row="currentRow">
              <el-table-column prop="dictName" style="text-align: center;">
                <template #default="scope">
                  {{ scope.row.dictName }}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination-container">
            <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" :current-page="currentPage"
                           :total="total" style="position: absolute;bottom: 0;left: -10px;" />
          </div>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="dictionary-detail">
          <span>字典详情</span>
          <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width:1000px;padding:40px;" :before-close="handleClose">
            <el-form :model="saveDictDetailForm">
              <el-form-item label="名称">
                <el-input v-model="saveDictDetailForm.dictLabel"></el-input>
              </el-form-item>
              <el-form-item label="排序">
                <el-input v-model="saveDictDetailForm.dictSort"></el-input>
              </el-form-item>
              <el-form-item label="键值">
                <el-input v-model="saveDictDetailForm.dictValue"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="saveDictDetailForm.status">
                  <el-option label="启用" value="0"></el-option>
                  <el-option label="停用" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="备注">
                <el-input type="textarea" v-model="saveDictDetailForm.remark"></el-input>
              </el-form-item>
            </el-form>
            <template #footer>
              <el-button @click="handleClose">取消</el-button>
              <el-button type="primary" @click="saveDictDetail">确定</el-button>
            </template>
          </el-dialog>
          <el-button color="blue" style="float: right;margin-right: 20px;margin-top: 15px;" @click="addDictDetail">新增</el-button>
        </div>
        <div style="width:300px ">
          <el-form :model="searchDictDetailForm">
            <el-form-item>
              <el-input prefix-icon="Search" placeholder="请输入..." @keydown.enter="handleEnter" @clear="loadDictDetail" clearable style="width: 100%;padding: 10px;" v-model="searchDictDetailForm.dictLabel"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-table :data="currentPageDataDetail" style="width: 100%;" :cell-style.data="{ 'text-align': 'center' }" :header-cell-style.data="{'text-align': 'center','background-color': '#F2F2F2',height: '60px'}">
            <el-table-column type="index" label="编码" width="100px"/>
            <el-table-column prop="dictLabel" label="名称" />
            <el-table-column prop="status" label="状态" :formatter="dictDetailStatusFormatter" width="240px">
              <template #default="scope">
                <div v-if="scope.row.status === '0'" style="display: flex; align-items: center;">
                  <span style="display: inline-block; border-radius: 50%; width: 18px; height: 18px; background-color: #18CCD0;margin-left: 70px;"></span>
                  <span style="padding-left: 5px;">启用中</span>
                </div>
                <div v-else style="display: flex; align-items: center;">
                  <span style="display: inline-block; border-radius: 50%; width: 18px; height: 18px; background-color: #EC2121;margin-left: 70px;"></span>
                  <span style="padding-left: 5px;">禁用中</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="更新时间" />
            <el-table-column prop="remark" label="备注" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="text" @click="handleEdit(scope.$index)" style="color:#2D82FF ">编辑</el-button>
                <el-button type="text" @click="handleDelete(scope.row.id)" style="color:#EC404B">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <el-pagination
              background
              layout="prev, pager, next"
              :total="tableDataDetail.length"
              :page-size="pageSize1"
              :current-page="currentPage1"
              @current-change="handleCurrentChange1"
              style="position: absolute;bottom: 0;right: 40px;"
          />
        </div>
      </el-col>
    </el-row>
  </ElCard>

</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import qs from "qs";

const searchForm = ref({
  dictName: ''
});

const tableData = ref([]);
const pageSize = ref(10);
const currentPage = ref(1);
const currentRow = ref(null);

const pageSize1 = ref(10); // 每页显示的条数
const currentPage1 = ref(1); // 当前页码

const selectedRow = ref(null); // 用于存储点击行的参数值
const dictType = ref('sys_user_sex'); // 初始化默认值

const loadTableData = () => {
  axios.get(getBaseURL(4) + '/v1/medical/medicalSystem/selectDictList?' + qs.stringify(searchForm.value))
      .then(response => {
        if (response.data.code === 2000) {
          tableData.value = response.data.data;
        } else {
          ElMessage.error(response.data.msg);
        }
      })
      .catch(error => {
        ElMessage.error(error.message);
      });
};

const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableData.value.slice(start, end);
});

const total = computed(() => tableData.value.length);

const handleCurrentChange = (page) => {
  currentPage.value = page;
};

const searchDictDetailForm = ref({
  dictLabel: '',
})

const dialogTitle = ref('新增字典');
const dialogVisible = ref(false);

const saveDictDetailForm = ref({
  dictLabel: '',
  dictValue: '',
  dictSort: '',
  status: '',
  remark: '',
})

const handleClose = () => {
  ElMessageBox.confirm('确认关闭？')
      .then(() => {
        dialogVisible.value = false;
        saveDictDetailForm.value = {
          dictLabel: '',
          dictValue: '',
          dictSort: '',
          status: '',
          remark: ''
        };
      })
      .catch(() => { });
};

const tableDataDetail = ref([]); // 存储所有字典详情数据

const loadDictDetail = () => {
  console.log('DictType:', dictType.value);
  let label = searchDictDetailForm.value.dictLabel;
  axios.get(getBaseURL(4) + '/v1/medical/medicalSystem/selectDictDetail?dictLabel=' + label + '&dictType=' + dictType.value)
      .then(response => {
        if (response.data.code === 2000) {
          tableDataDetail.value = response.data.data; // 保存所有数据到 tableDataDetail
        } else {
          ElMessage.error(response.data.msg);
        }
      })
      .catch(error => {
        ElMessage.error(error.message);
      });
};

const addDictDetail = () => {
  dialogVisible.value = true;
  dialogTitle.value = '新增字典项';
  saveDictDetailForm.value.dictType = dictType.value;
};

const saveDictDetail = () => {
  dialogVisible.value = true;
  dialogTitle.value = '新增字典项';
  saveDictDetailForm.value.dictType = dictType.value;
  axios.post(getBaseURL(4) + '/v1/medical/medicalSystem/save',qs.stringify(saveDictDetailForm.value))
      .then(response => {
        if (response.data.code === 2000) {
          ElMessage.success('保存成功');
          dialogVisible.value = false;
          loadDictDetail(); // 重新加载字典详情数据
          saveDictDetailForm.value = {}; // 清空表单数据
        }else{
          ElMessage.error(response.data.msg);
        }
      })
      .catch(error => {
        ElMessage.error(error.message);
      });
};

const handleEnter = (event) => {
  event.preventDefault(); // 阻止默认的表单提交行为
  loadDictDetail();
  loadTableData(); // 调用最新的 loadDictDetail 方法
};

// 定义函数，格式化启用状态
const dictDetailStatusFormatter = (row, column, cellValue, index) => {
  return cellValue === '0' ? '启用中' : '禁用中';
}

// 计算当前页的字典详情数据
const currentPageDataDetail = computed(() => {
  const start = (currentPage1.value - 1) * pageSize1.value;
  const end = start + pageSize1.value;
  return tableDataDetail.value.slice(start, end);
});

const handleRowClick = (row) => {
  selectedRow.value = row;
  dictType.value = row.dictType; // 更新 dictType 的值
  loadDictDetail(); // 调用 loadDictDetail 方法
};

const handleEdit = (index) => {
  dialogVisible.value = true;
  dialogTitle.value = '编辑字典项';
  saveDictDetailForm.value.dictType = dictType.value;
  saveDictDetailForm.value = tableDataDetail.value[index];
};
const handleDelete = (id) => {
  ElMessageBox.confirm('确认删除？')
      .then(() => {
        axios.post(getBaseURL(4) + '/v1/medical/medicalSystem/deleteDictDetail?id=' + id)
            .then(response => {
              if (response.data.code === 2000) {
                ElMessage.success('删除成功');
                loadDictDetail(); // 重新加载字典详情数据
              } else {
                ElMessage.error(response.data.msg);
              }
            })
            .catch(error => {
              ElMessage.error(error.message);
            });
      })
      .catch(() => {});
};

const handleCurrentChange1 = (page) => {
  currentPage1.value = page;
};

onMounted(() => {
  loadTableData();
  loadDictDetail();
});
</script>





<style scoped>
.dictionary-list{
  text-align: left;
  line-height: 60px;
  padding-left: 20px;
  height: 60px;
  border-bottom: 1px solid #F0F2F5;
}
.dictionary-detail{
  text-align: left;
  line-height: 60px;
  padding-left: 20px;
  height: 60px;
  border-bottom: 1px solid #F0F2F5;
}
.dictionary-detail>span{
  font-size: 20px;
  font-weight: bold;
}
.pagination-container{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.dictionary-item{
  padding: 10px;
  border-bottom: 1px solid #F0F2F5;
}

.el-pagination {
  --el-pagination-font-size: 13px;
}
.el-pagination[data-v-be45fd9e] {
  --el-pagination-font-size: 13px;
}

</style>
